<template>
	<div class="pieChart">
		<div
			:id="id"
			:class="className"
			:style="{ height: height, width: width }"
		/>
		<div class="legend">
			<div v-for="item of dataList" class="legend-single">
				<div
					class="circle"
					:style="{ background: item.itemStyle.color }"
				></div>
				<div class="key">{{ item.name }}</div>
				<div class="value">{{ item.value }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import echarts from "echarts";
import resize from "./mixins/resize";
import { debounce } from "@/utils";

export default {
	mixins: [resize],
	props: {
		className: {
			type: String,
			default: "PieChart"
		},
		id: {
			type: String,
			default: "PieChart"
		},
		width: {
			type: String,
			default: "300px"
		},
		height: {
			type: String,
			default: "300px"
		},
		legendData: {
			type: Array,
			default: function() {
				return ["Ⅰ类", "Ⅱ类", "Ⅲ类", "Ⅳ类", "Ⅴ类"];
			}
		},
		colorList: {
			type: Array,
			default: function() {
				return INFO_SOUCE_TYPE_COLORS;
			}
		},
		dataList: {
			type: Array,
			default: function() {
				return [
					{
						value: 285,
						name: "Ⅰ类",
						itemStyle: {
							color: "#d0021b"
						}
					},
					{
						value: 410,
						name: "Ⅱ类",
						itemStyle: {
							color: "#ff4747"
						}
					},
					{
						value: 274,
						name: "Ⅲ类",
						itemStyle: {
							color: "#f8780e"
						}
					},
					{
						value: 235,
						name: "Ⅳ类",
						itemStyle: {
							color: "#fac14b"
						}
					},
					{
						value: 235,
						name: "Ⅴ类",
						itemStyle: {
							color: "#fff29a"
						}
					}
				];
			}
		}
	},
	data() {
		return {
			chart: null,
			widthX: "65%",
			resizeHandOwn: () => {},
			oldId: '',
		};
	},
	mounted() {
		this.resizeHandOwn = debounce(() => {
			this.autoChagneChart();
		}, 300);
		this.autoChagneChart();
		setTimeout(() => {
			this.initChart();
		}, 600);
		const _this = this;
		this.chart.on("click", function(params) {
			console.log(params);
			if( params.data.id && this.oldId !== params.data.id ) {
				this.oldId = params.data.id
				_this.$emit('paramId', params.data.id)
			}else{
				_this.$emit('paramId', 'all')
			}
		});
		window.addEventListener("resize", this.resizeHandOwn);
	},
	beforeDestroy() {
		if (!this.chart) {
			return;
		}
		this.chart.dispose();
		this.chart = null;
		window.removeEventListener("resize", this.resizeHandOwn);
	},
	methods: {
		autoChagneChart() {
			let windowWidth = document.body.clientWidth;
			if (windowWidth < 1700 && windowWidth >= 1600) {
				this.widthX = "60%";
				this.initChart();
			} else if (windowWidth < 1600 && windowWidth >= 1400) {
				this.widthX = "55%";
				this.initChart();
			} else if (windowWidth < 1400 && windowWidth >= 1350) {
				this.widthX = "50%";
				this.initChart();
			} else if (windowWidth < 1350) {
				this.widthX = "48%";
				this.initChart();
			} else {
				this.widthX = "65%";
				this.initChart();
			}
		},
		initChart() {
			let that = this;
			this.chart = echarts.init(document.getElementById(this.id));
			let copyData = this.deepClone(this.dataList).sort(
				(a, b) => a.value - b.value
			);
			this.chart.setOption({
				// title: {
				//   text: "南丁格尔玫瑰图",
				//   left: "center",
				//   top: 20,
				//   textStyle: {
				//     color: "#ccc"
				//   }
				// },
				legend: {
					show: false,
					left: "0",
					top: 15,
					orient: "vertical",
					x: 30,
					textStyle: {
						color: "#ffffff",
						fontSize: 12,
						rich: {
							a: {
								fontSize: 14,
								padding: [0, 0, 0, 4]
							}
						}
					},
					itemGap: 20,
					itemWidth: 10,
					padding: [2, 50],
					icon: "circle",
					formatter: function(name) {
						let number;
						that.dataList.forEach(item => {
							if (item.name == name) number = item.value;
						});
						return name + " " + "{a|" + number + "}";
					},
					data: this.legendData
				},
				tooltip: {
					trigger: "item",
					formatter: "{b} : {c} ({d}%)"
				},
				visualMap: {
					show: false,
					min: 200,
					max: 600,
					inRange: {
						//colorLightness: [0, 1]
					}
				},
				series: [
					{
						name: "访问来源",
						type: "pie",
						radius: "70%", // 设置饼状大小
						center: [this.widthX, "50%"], //
						color: this.colorList, //'#FBFE27','rgb(11,228,96)','#FE5050'
						data: copyData,
						// roseType: "radius",
						selectedMode:'single',
             			selectedOffset:10,
						label: {
							normal: {
								show: false,
								formatter: ["{c|{c}次}", "{b|{b}}"].join("\n"),
								rich: {
									c: {
										color: "rgb(241,246,104)",
										fontSize: 12,
										fontWeight: "bold",
										lineHeight: 5
									},
									b: {
										color: "rgb(98,137,169)",
										fontSize: 12,
										height: 40
									}
								}
							}
						},
						labelLine: {
							normal: {
								lineStyle: {
									color: "rgb(98,137,169)"
								},
								smooth: 0.2,
								length: 10,
								length2: 20
							}
						},
						itemStyle: {
							normal: {
								shadowColor: "rgba(0, 0, 0, 0.8)",
								shadowBlur: 50
							}
						}
					}
				]
      });

		},
		deepClone(obj) {
			let objClone = Array.isArray(obj) ? [] : {};
			if (obj && typeof obj === "object") {
				for (const key in obj) {
					// console.log(key);

					if (obj.hasOwnProperty(key)) {
						//判断ojb子元素是否为对象，如果是，递归复制
						if (obj[key] && typeof obj[key] === "object") {
							objClone[key] = this.deepClone(obj[key]);
						} else {
							//如果不是，简单复制
							objClone[key] = obj[key];
						}
					}
				}
			}
			return objClone;
		}
	}
};
</script>
<style lang="scss" scoped>
.pieChart {
	height: 100%;
	width: 100%;
	position: relative;
	.legend {
		width: 30%;
		position: absolute;
		left: 30px;
		top: 10%;
		.legend-single {
			width: 80%;
			margin: 9px;
			display: inline-block;
			div {
				display: inline-block;
			}
			.circle {
				width: 12px;
				height: 12px;
				border-radius: 50%;
			}
			.value {
				float: right;
			}
		}
	}
}
</style>
